<template>
  <div class="header">
    <el-card>
      <el-table :data="tableData" border size="small" stripe
                :header-cell-style="{textAlign:'center',backgroundColor:'#e4eaec'}"
                :cell-style="{textAlign: 'center'}">
        <el-table-column type="index" label="排序" width="70px"/>
        <el-table-column prop="name" label="菜单名" width="150px"/>
        <el-table-column prop="submenu" label="子菜单"/>
        <el-table-column prop="link" label="链接" width="200px"/>
        <el-table-column label="状态" width="150px">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.switch" active-color="#ffab23" inactive-color="#bababa"/>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button size="small" type="info" plain @click="dialogFormVisible=true">添加子菜单</el-button>
            <el-button size="small" type="info" plain>修改</el-button>
            <el-button size="small" type="info" plain @click="dialogDel=true">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--添加子菜单对话框-->
    <el-dialog :visible.sync="dialogFormVisible" class="add" width="35%">
      <template #title>
        <span class="dialogTitle">添加子菜单：</span>
      </template>
      <el-form :model="addForm" size="small" label-width="80px" label-position="left">

        <el-form-item label="菜单名">
          <el-input v-model="addForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接">
          <el-input v-model="addForm.link" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单">
          <el-select v-model="addForm.region" style="width: 100%">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="addForm.icon">
            <!--            <el-button slot="append">浏览</el-button>-->
          </el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="addForm.stor" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small">提交</el-button>
      </div>
    </el-dialog>

    <!--删除对话框-->
    <el-dialog :visible.sync="dialogDel" class="del" width="35%">
      <template #title>
        <span>确定要删除该菜单吗？</span>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDel = false" size="small">取消</el-button>
        <el-button @click="dialogDel = false" size="small">确定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      //表格数据
      tableData: [
        {name: '数据概览', submenu: '', switch: true, link: ''},
        {name: '任务管理', submenu: '任务列表/任务审核', switch: false, link: ''},
        {name: '财务管理', submenu: '', switch: true, link: ''},
        {name: '会员中心', submenu: '会员管理/等级管理', switch: true, link: ''},
        {name: '代理管理', submenu: '', switch: false, link: ''},
        {name: '员工管理', submenu: '', switch: true, link: ''},
        {name: '消息中心', submenu: '', switch: true, link: ''},
        {name: '系统设置', submenu: '菜单管理/用户管理/管理员列表/参数配置', switch: false, link: ''},
      ],

      //添加表单
      addForm: {},

      //添加对话框状态
      dialogFormVisible: false,
      dialogDel: false,

    }
  },

}
</script>

<style lang="scss" scoped>
.header {
  margin: 30px;

  .el-table {
    .el-button:nth-child(1) {
      background-color: #2f71a9;
      color: white;
    }

    .el-button:nth-child(2) {
      background-color: #28acb8;
      color: white;
    }

    .el-button:nth-child(3) {
      background-color: #acbac2;
      color: white;
    }
  }
}

.add .el-dialog {
  .dialog-footer {
    text-align: center;

    .el-button {
      background-color: #2f71a9;
      color: white;
    }
  }
}

.del {
  ::v-deep .el-dialog__body {
    padding: 10px 0;
  }

  .el-dialog {
    .dialog-footer {
      text-align: center;

      .el-button:nth-child(1) {
        background-color: #e3e4e8;
      }

      .el-button:nth-child(2) {
        background-color: #2f71a9;
        color: white;
      }

    }
  }

}

</style>
